<!DOCTYPE html>
<html
	<head>
		<meta charset="utf-8">
		<title>登陆页面</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="assets/layui/css/layui.css">
		<style>
			html {
				width: 100%;
				height: 100%;
			}
			
			body {
				background: url(assets/img/login-bg.jpg) no-repeat left top;
				background-size: cover;
			}
			
			.layui-container {
				width: 328px;
				height: 400px;
				margin-top: 150px;
				background-color: rgba(255, 255, 255, 0.7);
				border-radius: 10px;
			}
			
			.layui-text h3 {
				text-align: center;
				height: 100px;
				line-height: 100px;
			}
			
			.layui-input {
				border: none;
				border-bottom: 1px solid #fff;
				background: none;
			}
			
			.layui-form-label {
				width: 40px;
			}
			
			.login-btn {
				padding: 20px 0;
			}
			
			.login-btn button {
				width: 250px;
			}
			
			.layui-input-block {
				margin: 0 20px;
			}
			
			.layui-form-checkbox span {
				font-size: 12px;
			}
			
			.layui-form-checkbox[lay-skin=primary] i {
				width: 14px;
				height: 14px;
			}
			.login-register-btn{
				text-align: center;
				font-size: 12px;
			}
			.login-register-btn a:hover{
				color:#009688;
			}
		</style>
	</head>
	<body>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
		  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<div class="layui-container">
			<div class="layui-text">
				<h3>登录</h3>
			</div>
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<!--<label class="layui-form-label"></label>-->
					<div class="layui-input-block">
						<input type="text" name="username" required lay-verify="username|required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<!--<label class="layui-form-label"></label>-->
					<div class="layui-input-block">
						<input type="password" name="password" required lay-verify="pass|required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
					<!--<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>-->
				</div>
				<div class="layui-form-item" pane="">
					<!--<label class="layui-form-label"></label>-->
					<div class="layui-input-block">
						<input type="checkbox" name="like1[write]" lay-skin="primary" title="记住密码">
					</div>
				</div>
				<div class="login-btn" style="text-align: center;">
					<button class="layui-btn" lay-submit="" lay-filter="login">登  录</button>
				</div>
			</form>
			<div class="login-register-btn">还没有账号？<a href="register.html">立即注册</a></div>
		</div>

		<script src="assets/layui/layui.js"></script>
		<script src="assets/js/jquery-2.1.0.js"></script>
		<script>
			//JavaScript代码区域
			layui.use(['form', 'upload'], function() {
				var form = layui.form,
					layer = layui.layer,
					upload = layui.upload;

				//自定义验证规则
				form.verify({
					username: function(value, item) { //value：表单的值、item：表单的DOM对象
							if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
								return '用户名不能有特殊字符';
							}
							if(/(^\_)|(\__)|(\_+$)/.test(value)) {
								return '用户名首尾不能出现下划线\'_\'';
							}
							if(/^\d+\d+\d$/.test(value)) {
								return '用户名不能全为数字';
							}
						}

						//我们既支持上述函数式的方式，也支持下述数组的形式
						//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
						,
					pass: [
						/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
					]
				});

				//监听提交
				form.on('submit(login)', function(data) {
					layer.alert(JSON.stringify(data.field), {
						title: '最终的提交信息'
					});
					window.open("index.html")
					return false;
				});

			});
		</script>
	</body>
</html>